<template>
  <el-container>
    <el-header v-if="book.status === 0">
      <el-button size="small" @click="readOnlyFlag = !readOnlyFlag" v-text="readOnlyFlag ? '编辑' : '取消编辑'"></el-button>
      <el-button size="small" v-show="!readOnlyFlag" @click="editBookMetadata">保存</el-button>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <div id="menu">
          <MenuItem :item="item" :key="item.name" v-for="item in items" @change-selection="refreshList"></MenuItem>
        </div>
      </el-aside>
      <el-main style="padding: 0px">
      <el-form :disabled="readOnlyFlag" :inline="true" :model="MetadataForm" :style="{ display: (items[0].selected ? '' : 'none') }"
               class="demo-form-inline"
               style="height: 500px">
        <div style="margin-top: 10px">
          <div class="inline-block">
            <div>附注</div>
            <el-input size="small" class="input-with-select" v-model="MetadataForm.annotation"></el-input>
          </div>
          <div class="inline-block">
            <div>封面</div>
            <el-input size="small" class="input-with-select" v-model="MetadataForm.cover"></el-input>
          </div>
        </div>
        <div style="margin-top: 10px">
          <div class="inline-block">
            <div>所属分类</div>
            <div class="input-with-select">
              <el-cascader style="width: 100%;" v-model="MetadataForm.Category" :options="UTIL.getBookTagTree()" filterable clearable
                           :props="{label: 'name', value: 'id', checkStrictly: true}"/>
            </div>
          </div>
          <div class="inline-block">
            <div>版本</div>
            <el-input size="small" class="input-with-select" v-model="MetadataForm.Edition"></el-input>
          </div>
        </div>
        <div style="margin-top: 10px">
          <div class="inline-block">
            <div>权限</div>
            <el-input size="small" class="input-with-select" v-model="MetadataForm.Right"></el-input>
          </div>
          <div class="inline-block">
            <div>时空范围</div>
            <el-input size="small" class="input-with-select" v-model="MetadataForm.Coverage"></el-input>
          </div>
        </div>
        <div style="margin-top: 10px">
          <div class="inline-block">
            <div>语种</div>
            <el-input size="small" class="input-with-select" v-model="MetadataForm.Language"></el-input>
          </div>
          <div class="inline-block">
            <div>来源</div>
            <el-input size="small" class="input-with-select" v-model="MetadataForm.Source"></el-input>
          </div>
        </div>
        <div style="margin-top: 10px">
          <div class="inline-block">
            <div>唯一标识符</div>
            <el-input size="small" class="input-with-select" v-model="MetadataForm.Identifier"></el-input>
          </div>
          <div class="inline-block">
            <div>数字资源类型</div>
            <el-input size="small" class="input-with-select" v-model="MetadataForm.Type"></el-input>
          </div>
        </div>
        <div style="margin-top: 10px">
          <div class="inline-block">
            <div>国际标准书号</div>
            <el-input readonly size="small" class="input-with-select" v-model="MetadataForm.ISBN"></el-input>
          </div>
        </div>
      </el-form>

      <el-form :disabled="readOnlyFlag" :inline="true" :model="TitlesForm" :style="{ display: (items[1].selected ? '' : 'none') }" class="demo-form-inline"
               style="height: 500px">
        <div style="margin-top: 10px">
          <div class="inline-block">
            <div>正题名</div>
            <el-input size="small" class="input-with-select" v-model="TitlesForm.Main_Title"></el-input>
          </div>
          <div class="inline-block">
            <div>交替题名</div>
            <el-input size="small" class="input-with-select" v-model="TitlesForm.Alternative_Title"></el-input>
          </div>
        </div>
        <div style="margin-top: 10px">
          <div>
            <div class="inline-block">
              <div>并列题名</div>
              <el-input size="small" class="input-with-select" v-model="TitlesForm.Parallel_Title"></el-input>
            </div>
            <div class="inline-block">
              <div>其他题名</div>
              <el-input size="small" class="input-with-select" v-model="TitlesForm.Other_Title"></el-input>
            </div>
          </div>
        </div>
      </el-form>

      <el-form :disabled="readOnlyFlag" :inline="true" :model="SubjectForm" :style="{ display: (items[2].selected ? '' : 'none') }" class="demo-form-inline"
               style="height: 500px">
        <div style="margin-top: 10px">
          <div class="inline-block">
            <div>中图号</div>
            <el-input size="small" class="input-with-select" v-model="SubjectForm.CLC_ClassCode"></el-input>
          </div>
          <div class="inline-block">
            <div>关键词</div>
            <el-input size="small" class="input-with-select" v-model="SubjectForm.KeyWords"></el-input>
          </div>
        </div>
      </el-form>

      <el-table :height="tableHeight" :data="CreatorsTableData" :style="{ display: (items[3].selected ? '' : 'none') }" border stripe>
        <el-table-column label="名字" prop="Name">
          <template slot-scope="scope">
            <el-input :readonly="readOnlyFlag" style="width: 150px" v-model="scope.row.Name">
            </el-input>
          </template>
        </el-table-column>
        <el-table-column label="角色" prop="Role">
          <template slot-scope="scope">
            <el-input :readonly="readOnlyFlag" style="width: 150px" v-model="scope.row.Role">
            </el-input>
          </template>
        </el-table-column>
        <el-table-column label="描述" prop="Institution">
          <template slot-scope="scope">
            <el-input :readonly="readOnlyFlag" style="width: 150px" v-model="scope.row.Institution">
            </el-input>
          </template>
        </el-table-column>
        <el-table-column v-if="!readOnlyFlag" label="操作" width="150">
          <template slot-scope="scope">
            <span><el-link v-if="scope.$index === CreatorsTableData.length - 1"
                           @click="addCreator">新增</el-link></span>
            <span><el-link type="danger"
                           @click="CreatorsTableData.remove(scope.row)">删除</el-link></span>
          </template>
        </el-table-column>
      </el-table>

      <el-form :disabled="readOnlyFlag" :inline="true" :model="DescriptionForm" :style="{ display: (items[4].selected ? '' : 'none') }"
               class="demo-form-inline"
               style="height: 500px">
        <div style="margin-top: 10px">
          <div class="inline-block">
            <div>资源类型</div>
            <el-input size="small" class="input-with-select" v-model="DescriptionForm.contentType"></el-input>
          </div>
          <div class="inline-block">
            <div>内容简介</div>
            <el-input size="small" class="input-with-select" v-model="DescriptionForm.Introduction"></el-input>
          </div>
        </div>
        <div style="margin-top: 10px">
          <div class="inline-block">
            <div>其他</div>
            <el-input size="small" class="input-with-select" v-model="DescriptionForm.Other"></el-input>
          </div>
        </div>
      </el-form>

      <el-form :disabled="readOnlyFlag" :inline="true" :model="PublisherForm" :style="{ display: (items[5].selected ? '' : 'none') }"
               class="demo-form-inline"
               style="height: 500px">
        <div style="margin-top: 10px">
          <div class="inline-block">
            <div>出版者</div>
            <el-input size="small" class="input-with-select" v-model="PublisherForm.Publisher"></el-input>
          </div>

          <div class="inline-block">
            <div>出版地</div>
            <el-input size="small" class="input-with-select" v-model="PublisherForm.Publish_Area"></el-input>
          </div>
        </div>
      </el-form>

      <el-table :height="tableHeight" :data="ContributorTableData" :style="{ display: (items[6].selected ? '' : 'none') }" border stripe>
          <el-table-column label="名字" prop="Name">
            <template slot-scope="scope">
              <el-input :readonly="readOnlyFlag" style="width: 150px" v-model="scope.row.Name">
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="角色" prop="Role">
            <template slot-scope="scope">
              <el-input :readonly="readOnlyFlag" style="width: 150px" v-model="scope.row.Role">
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="描述" prop="Institution">
            <template slot-scope="scope">
              <el-input :readonly="readOnlyFlag" style="width: 150px" v-model="scope.row.Institution">
              </el-input>
            </template>
          </el-table-column>
          <el-table-column v-if="!readOnlyFlag" label="操作" width="150">
            <template slot-scope="scope">
            <span><el-link v-if="scope.$index === ContributorTableData.length - 1"
                           @click="addContributor">新增</el-link></span>
              <span><el-link type="danger"
                             @click="ContributorTableData.remove(scope.row)">删除</el-link></span>
            </template>
          </el-table-column>
        </el-table>

      <el-form :disabled="readOnlyFlag" :inline="true" :model="DateForm" :style="{ display: (items[7].selected ? '' : 'none') }" class="demo-form-inline"
               style="height: 500px">
        <div>
          <div class="block" style="display: inline-block;margin-left: 10px">
            <div class="demonstration">出版日期</div>
            <el-date-picker
              v-model="DateForm.Publish_Date"
              value-format="yyyy.MM"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>
          <div class="block" style="display: inline-block;margin-left: 10px">
            <div class="demonstration">创建日期</div>
            <el-date-picker
              v-model="DateForm.Create_Date"
              value-format="yyyy.MM.dd"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </div>
        <div>
          <div class="block" style="margin-top: 10px;display: inline-block;margin-left: 10px">
            <div class="demonstration">提交日期</div>
            <el-date-picker
              v-model="DateForm.Submit_Date"
              value-format="yyyy.MM.dd"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>
          <div class="block" style="margin-top: 10px;display: inline-block;margin-left: 10px">
            <div class="demonstration">审核日期</div>
            <el-date-picker
              v-model="DateForm.Check_Date"
              value-format="yyyy.MM.dd"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </div>
        <div>
          <div class="block" style="margin-top: 10px;display: inline-block;margin-left: 10px">
            <div class="demonstration">修改日期</div>
            <el-date-picker
              v-model="DateForm.Modify_Date"
              value-format="yyyy.MM.dd"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>
          <div class="block" style="margin-top: 10px;display: inline-block;margin-left: 10px">
            <div class="demonstration">失效日期</div>
            <el-date-picker
              v-model="DateForm.Failure_Date"
              value-format="yyyy.MM.dd"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </div>
      </el-form>

      <el-form :disabled="readOnlyFlag" :inline="true" :model="FormatForm" :style="{ display: (items[8].selected ? '' : 'none') }" class="demo-form-inline"
               style="height: 500px">
        <div>
          <div class="inline-block">
            <div>数字资源格式类</div>
            <el-input size="small" class="input-with-select" v-model="FormatForm.Format_type"></el-input>
          </div>
          <div class="inline-block">
            <div>资源载体</div>
            <el-input size="small" class="input-with-select" v-model="FormatForm.Resource_carrier"></el-input>
          </div>
        </div>
        <div style="margin-top: 10px">
          <div class="inline-block">
            <div>资源大小</div>
            <el-input size="small" class="input-with-select" v-model="FormatForm.File_Size"></el-input>
          </div>
          <div class="inline-block">
            <div>字数</div>
            <el-input size="small" class="input-with-select" v-model="FormatForm.Words"></el-input>
          </div>
        </div>
        <div style="margin-top: 10px">
          <div class="inline-block">
            <div>技术环境</div>
            <el-input size="small" class="input-with-select"
                      v-model="FormatForm.Technical_environment"></el-input>
          </div>
          <div class="inline-block">
            <div>页数</div>
            <el-input size="small" class="input-with-select" v-model="FormatForm.Pages"></el-input>
          </div>
        </div>
        <div style="margin-top: 10px">
          <div class="inline-block">
            <div>开本</div>
            <el-input size="small" class="input-with-select" v-model="FormatForm.Extent"></el-input>
          </div>
          <div class="inline-block">
            <div>图书在版编目数据</div>
            <el-input size="small" class="input-with-select" v-model="FormatForm.CIP"></el-input>
          </div>
        </div>
        <div style="margin-top: 10px">
          <div class="inline-block">
            <div>分辨率</div>
            <el-input size="small" class="input-with-select" v-model="FormatForm.Resolution"></el-input>
          </div>

        </div>
      </el-form>

      <el-form :disabled="readOnlyFlag" :inline="true" :model="RelationForm" :style="{ display: (items[9].selected ? '' : 'none') }"
               class="demo-form-inline"
               style="height: 500px">
        <div>
          <div class="inline-block">
            <div>丛书名</div>
            <el-input size="small" class="input-with-select" v-model="RelationForm.Series"></el-input>
          </div>
          <div class="inline-block">
            <div>后版本</div>
            <el-input size="small" class="input-with-select"
                      v-model="RelationForm.Formal_Edition"></el-input>
          </div>
        </div>
        <div style="margin-top: 10px">
          <div class="inline-block">
            <div>前版本</div>
            <el-input size="small" class="input-with-select" v-model="RelationForm.Formal_Edition"></el-input>
          </div>
          <div class="inline-block">
            <div>配套光盘</div>
            <el-input size="small" class="input-with-select" v-model="RelationForm.Attached_Disc"></el-input>
          </div>
        </div>
      </el-form>

      <el-form :disabled="readOnlyFlag" :inline="true" :model="PriceForm" :style="{ display: (items[10].selected ? '' : 'none') }" class="demo-form-inline"
               style="height: 500px">
        <div>
          <div class="inline-block">
            <div>纸质图书价格</div>
            <el-input size="small" class="input-with-select" v-model="PriceForm.B_price"></el-input>
          </div>
          <div class="inline-block">
            <div>数字资源价格</div>
            <el-input size="small" class="input-with-select" v-model="PriceForm.E_price"></el-input>
          </div>
        </div>
      </el-form>

      <el-form :disabled="readOnlyFlag" :inline="true" :model="EditorForm" :style="{ display: (items[11].selected ? '' : 'none') }" class="demo-form-inline"
                 style="height: 500px">
          <div>
            <div class="inline-block">
              <div>策划编辑</div>
              <el-input size="small" class="input-with-select" v-model="EditorForm.Scheme_Editor"></el-input>
            </div>
            <div class="inline-block">
              <div>责任编辑</div>
              <el-input size="small" class="input-with-select" v-model="EditorForm.Commissioning_Editor"></el-input>
            </div>
          </div>
          <div style="margin-top: 10px">
            <div class="inline-block">
              <div>封面设计</div>
              <el-input size="small" class="input-with-select" v-model="EditorForm.Cover_Designer"></el-input>
            </div>
            <div class="inline-block">
              <div>版本设计</div>
              <el-input size="small" class="input-with-select" v-model="EditorForm.Layout_Disigner"></el-input>
            </div>
          </div>
          <div style="margin-top: 10px">
            <div class="inline-block">
              <div>责任校队</div>
              <el-input size="small" class="input-with-select" v-model="EditorForm.Press_Corrector"></el-input>
            </div>
            <div class="inline-block">
              <div>其他</div>
              <el-input size="small" class="input-with-select" v-model="EditorForm.others"></el-input>
            </div>
          </div>
        </el-form>
    </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import MenuItem from "../common/MenuItem";
  import {mapState} from "vuex";

  export default {
    name: "BookMetadata",
    components: {
      MenuItem,
    },
    data() {
      return {
        tableHeight: CONST.WORKSPACE_HEIGHT - 50,
        readOnlyFlag: true,
        items: [{
          name: '元数据',
          selected: true,
        }, {
          name: '标题',
          selected: false,
        }, {
          name: '主题',
          selected: false,
        }, {
          name: '创作者',
          selected: false,
        }, {
          name: '描述',
          selected: false,
        }, {
          name: '出版者',
          selected: false,
        }, {
          name: '协作者',
          selected: false,
        }, {
          name: '日期',
          selected: false,
        }, {
          name: '数字资源格式',
          selected: false,
        }, {
          name: '相关资源',
          selected: false,
        }, {
          name: '价格',
          selected: false,
        }, {
          name: '编辑',
          selected: false,
        }],
        MetadataForm: {},
        TitlesForm: {},
        SubjectForm: {},
        DescriptionForm: {},
        PublisherForm: {},
        FormatForm: {},
        RelationForm: {},
        PriceForm: {},
        EditorForm: {},
        DateForm: {},
        CreatorsTableData: [],
        ContributorTableData: [],
      }
    },
    computed: {
      ...mapState(['book'])
    },
    methods: {
      editBookMetadata() {
        this.book.name = this.book.metadata.Titles.Main_Title
        this.book.category = this.book.metadata.Category
        this.axios.post('/pmph/action/exerciseBook/updateById', this.book)
          .then(() => {
            this.$store.commit('closeBookMetadataDrawer', false)
          })
      },
      addCreator() {
        this.CreatorsTableData.push({
          Name: '',
          Role: '',
          Institution: '',
        })
      },
      addContributor() {
        this.ContributorTableData.push({
          Name: '',
          Role: '',
          Institution: '',
        })
      },
      refreshList(crtItem) {
        this.items.forEach(item => this.$set(item, 'selected', false))
        crtItem.selected = true
      },
    },
    created() {
      this.MetadataForm = this.book.metadata
      this.TitlesForm = this.MetadataForm.Titles
      this.SubjectForm = this.MetadataForm.Subject
      this.DescriptionForm = this.MetadataForm.Description
      this.PublisherForm = this.MetadataForm.Publisher
      this.FormatForm = this.MetadataForm.Format
      this.DateForm = this.MetadataForm.Date
      this.RelationForm = this.MetadataForm.Relation
      this.PriceForm = this.MetadataForm.Price
      this.EditorForm = this.MetadataForm.Editors
      this.CreatorsTableData = this.MetadataForm.Creators.Creator
      this.ContributorTableData = this.MetadataForm.Contributors.Contributor
    }
  }
</script>

<style scoped>
  .input-with-select {
    width: 320px;
    margin-top: 10px
  }

  .inline-block {
    display: inline-block;
    margin-left: 10px;
  }
</style>

